<template>
  <view class="bg">
    <view class="task_bg">
      <view
        class="task_one"
        style="padding: 0 20rpx; padding-bottom: 30rpx"
        v-for="(item, index2) in fkArr"
        :key="index2"
      >
        <view class="task_content" style="padding-top: 20rpx">
          <view class="task_child2" style="padding: 5rpx">
            <view class="task_test">
              <view class="task_left" style="flex: 2">反馈记录</view>
              <view class="task_right childFont" style="flex: 4">{{
                item.content
              }}</view>
            </view>
          </view>
          <view class="task_child2" style="padding: 5rpx">
            <view class="task_test">
              <view class="task_left" style="flex: 2">下一步计划</view>
              <view
                class="task_right childFont"
                style="flex: 4"
                v-if="item.plan"
                >{{ item.plan }}</view
              >
              <view class="task_right childFont" style="flex: 4" v-else
                >无</view
              >
            </view>
          </view>
          <view class="task_child" style="padding: 5rpx">
            <view class="task_test">
              <view class="task_left" style="flex: 2">存在问题</view>
              <view
                class="task_right childFont"
                style="flex: 4"
                v-if="item.problem"
                >{{ item.problem }}</view
              >
              <view class="task_right childFont" style="flex: 4" v-else
                >无</view
              >
            </view>
          </view>
          <view class="task_child2" style="padding: 5rpx">
            <view class="task_test">
              <view class="task_left" style="flex: 2">反馈单位</view>
              <view class="task_right childFont" style="flex: 4">{{
                item.deptName
              }}</view>
            </view>
          </view>
          <view class="task_child2" style="padding: 5rpx">
            <view class="task_test">
              <view class="task_left" style="flex: 2">反馈人</view>
              <view class="task_right childFont" style="flex: 4">{{
                item.senderName
              }}</view>
            </view>
          </view>
          <view class="task_child2" style="padding: 5rpx">
            <view class="task_test">
              <view class="task_left" style="flex: 2">反馈时间</view>
              <view class="task_right childFont" style="flex: 4"
                >{{ item.createDate }} {{ item.createTime }}</view
              >
            </view>
            <!-- <view class="task_test">
              <view class="task_left" style="flex: 2">反馈状态</view>
              <view
                v-show="item.status == 0"
                class="task_right childFont"
                style="flex: 4"
                >未处理</view
              >
              <view
                v-show="item.status == 1"
                class="task_right childFont"
                style="flex: 4"
                >合格</view
              >
              <view
                v-show="item.status == 2"
                class="task_right childFont"
                style="flex: 4"
                >重办</view
              >
              <view
                v-show="item.status == 3"
                class="task_right childFont"
                style="flex: 4"
                >已反馈</view
              >
            </view> -->
          </view>

          <view class="task_child2" style="padding: 10rpx">
            <view
              class="task_test"
              v-for="(item2, index3) in fileName(index2).name"
              :key="index3"
            >
              <view class="task_left" style="flex: 2" v-show="index3 == 0"
                >附件</view
              >
              <view
                class="task_left"
                style="flex: 2"
                v-show="index3 != 0"
              ></view>
              <view
                class="task_right childFont"
                style="flex: 4; color: rgb(31, 158, 247)"
                @tap="downLoad(fileName(index2).id[index3])"
                >{{ item2 }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import {
  getTaskrecord,
  getTaskrecordlog,
  getHandletask,
  getEndorseList,
  getSaveTaskUsert,
} from "../../../request/dcxt";
import { baseUrl1 } from "../../../request/baseUrl";
import ldSelect from "@/components/ld-select/ld-select.vue";
export default {
  components: {
    ldSelect,
  },
  data() {
    return {
      fkArr: [],
      taskUnitId: "",
    };
  },
  onLoad(option) {
    this.taskUnitId = option.taskUnitId;
    this.getData(option.taskUnitId);
  },
  onShow() {
    this.getData(this.taskUnitId);
  },
  methods: {
    fileName(index) {
      var obj;
      if (this.fkArr[index].file) {
        obj = {
          id: this.fkArr[index].file.split(","),
          name: this.fkArr[index].fileName.split(","),
        };
      } else {
        obj = {};
      }
      return obj;
    },
    downLoad(id) {
      plus.runtime.openURL(baseUrl1 + "/filesUpload/download?id=" + id);
      // uni.downloadFile({
      //   url: baseUrl1 + "/filesUpload/download?id=" + id, //仅为示例，并非真实的资源
      //   success: (res) => {
      //     console.log(res);
      //     if (res.statusCode === 200) {
      //       console.log("下载成功");
      //       this.$refs.uToast.show({
      //         title: "下载成功!",
      //         type: "success",
      //       });
      //     }
      //   },
      // });
    },
    getData(id) {
      var params = {
        loginerId: uni.getStorageSync("loginId"),
        userId: uni.getStorageSync("loginId"),
        taskUnitId: id,
      };
      // 反馈
      getTaskrecord(params).then((res) => {
        console.log("danyanji");
        console.log(res);
        this.fkArr = [];
        console.log(res.data.data);
        if (res.data.data) {
          this.fkArr = res.data.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top_search {
  width: 100vw;
  height: 120rpx;
  background-color: #3988ff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .search_screening {
    margin-left: 2%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.popupModel {
  position: relative;
  padding-top: 48rpx;
  text-align: center;

  view {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 999;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .popupContent {
    padding: 24rpx;

    .Content {
      width: 100%;
      display: flex;
      align-items: center;

      view {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
      }

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }
    }

    .pizhuan {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      padding-left: 20rpx;
      padding-top: 20rpx;

      .item {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8992a1;
        border: 1rpx solid #b9bcc2;
        border-radius: 8rpx;
        margin-right: 25rpx;
        margin-bottom: 30rpx;
        position: relative;

        .close {
          width: 40rpx;
          height: 40rpx;
          font-size: 22rpx;
          line-height: 40rpx;
          text-align: center;
          position: absolute;
          top: -20rpx;
          right: -20rpx;
          background-color: red;
          color: white;
          border-radius: 50%;
        }
      }
    }
  }
}

.task_bg {
  // margin-top: 120rpx;

  .task_one {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx;
    position: relative;
    margin-bottom: 40rpx;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 24rpx 8rpx 8rpx 8rpx;

    .line {
      width: 1rpx;
      height: calc(100% - 48rpx);
      // background-color: pink;
      position: absolute;
      left: 44rpx;
      top: 24rpx;
      border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
      // z-index: 5;
    }
  }

  .record_flex {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40rpx;

    .record_flex_1 {
      flex: 1;
      padding-left: 25rpx;

      .record_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .flex_1 {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 16rpx;
            height: 14rpx;
          }
        }

        .flex_2 {
          flex: 1.5;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 16rpx;
            height: 14rpx;
          }
        }

        .flex_right {
          display: flex;
          justify-content: flex-end;
          flex: 1;
        }

        .center_font {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #3074ff;
        }

        .name_font {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #272b32;
        }
      }

      .time {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
      }
    }

    .record_flex_40 {
      width: 40rpx;

      .round {
        width: 40rpx;
        height: 40rpx;
        background: linear-gradient(-30deg, #3074ff 0%, #41baff 100%);
        box-shadow: 2rpx 3rpx 12rpx 0rpx rgba(48, 116, 255, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999;

        image {
          width: 16rpx;
          height: 16rpx;
        }
      }
    }
  }

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 200rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 5;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .task_content {
    width: 100%;
    margin-top: 40rpx;

    .task_btnArr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;
    }

    .task_btn {
      background: #3074ff;
      border-radius: 4rpx;
      padding: 8rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .more {
        width: 24rpx;
        height: 6rpx;
        margin-right: 10rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .btn_color1 {
      // background-color: rgba(231, 233, 240, 1);
      background-color: #5cb85c;
    }

    .btn_color2 {
      background-color: rgba(248, 95, 120, 1);
    }

    .btn_color3 {
      background-color: #5cb85c;
    }

    .task_name {
      display: flex;
      padding-bottom: 40rpx;
    }

    .task_child2 {
      padding: 0rpx 0;
    }

    .task_child {
      padding: 0rpx 0;
      // border-top: 1rpx solid rgba(231, 233, 240, 1);
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    }

    .task_test {
      display: flex;
      margin: 0rpx 0;
    }

    .task_left {
      flex: 2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .nameFont {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .task_right {
      flex: 7;
      display: flex;
      align-items: center;
      word-break: break-all;

      .childFont {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
        word-break: break-all;
      }

      .zt_type1 {
        margin-left: 10rpx;
        background: #f85f78;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type2 {
        margin-left: 10rpx;
        background: rgba(250, 173, 51, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
